<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item label="角色名称:" prop="roleName">
        <el-input
          v-model="form.roleName"
          class="form-input"
          clearable
          placeholder="角色名称"
        />
      </el-form-item>
      <el-form-item label="角色编号:" prop="roleCode">
        <el-input
          v-model="form.roleCode"
          class="form-input"
          clearable
          placeholder="角色编号"
        />
      </el-form-item>
      <el-form-item label="状态:" prop="roleCode">
        <el-select
          v-model="form.state"
          class="form-input"
          placeholder="状态"
          clearable
        >
          <el-option
            v-for="item in usableType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="checkList">查询</el-button>
        <el-button type="primary" @click="handlerAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <hcTable
      :table-data="list"
      :options="tableOptions"
      :columns="tableColumn"
      @command="handleAction"
      @size-change="handlerPageSize"
      @current-change="handlerPageIndex"
    >
      <template #state="{ row }">
        <el-switch v-model="row.state" @change="changeEnable(row)" />
      </template>
      <template #creationTime="{ row }">
        {{ formatTime(row.creationTime) }}
      </template>
    </hcTable>
    <!-- 新增、编辑角色弹框 -->
    <role-dialog
      :options="options"
      :menus="curRoleMenu"
      @onCancel="closeDialog"
      @onSure="onSure"
    />
  </div>
</template>

<script setup name="RoleManageHome">
import { reactive, ref, toRefs, computed } from "vue";
import { getRoleMenuApi } from "@/api/menu";
import useTable from "@/hooks/useTable";
import { formatTime } from "@/utils";
import RoleDialog from "./components/role-dialog.vue";

const {
  list,
  total,
  loading,
  getList,
  addFun,
  updateFun,
  deleteFun,
  editStateFun,
} = useTable("/Role");

const formRef = ref();

// 可用类型
const usableType = [
  { label: "全部", value: "" },
  { label: "正常", value: true },
  { label: "停用", value: false },
];

const tableColumn = [
  { type: "index", width: "50", label: "No.", align: "center" },
  { prop: "roleName", label: "角色名称", align: "center" },
  { prop: "roleCode", label: "角色编号", align: "center" },
  { prop: "orderNum", width: "120", label: "显示顺序", align: "center" },
  {
    prop: "state",
    width: "120",
    label: "状态",
    align: "center",
    slot: "state",
  },
  {
    prop: "creationTime",
    label: "创建时间",
    align: "center",
    slot: "creationTime",
  },
  {
    width: "270",
    label: "操作",
    align: "center",
    buttons: [
      {
        name: "编辑",
        type: "warning",
        command: "edit",
        permission: [],
      },
      {
        name: "删除",
        type: "danger",
        command: "delete",
        permission: [],
      },
    ],
  },
];

const data = reactive({
  // 绑定数据
  form: {
    roleName: "",
    roleCode: "",
    state: "",
  },
  page: {
    pageSize: 10,
    pageIndex: 1,
  },
  options: {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curRole: null,
  },
  curRoleMenu: [], // 当前点击的角色下的菜单权限 用于编辑时设置当前角色菜单
});

const tableOptions = computed(() => {
  return {
    loading: loading.value,
    showPagination: true,
    // paginationPosition: 'center',
    border: true,
    paginationConfig: {
      total: total.value,
      currentPage: data.page.pageIndex,
      pageSize: data.page.pageSize,
    },
  };
});

const params = computed(() => {
  let form = JSON.parse(JSON.stringify(data.form));
  Object.keys(form).forEach((key) => {
    if (form[key] === null) {
      form[key] = "";
    }
  });
  return {
    ...form,
    ...data.page,
  };
});
// 操作事件
const handleAction = (command, row) => {
  switch (command) {
    case "edit":
      handlerEdit(row);
      break;
    case "delete":
      handlerDel(row.id);
      break;
    default:
      break;
  }
};
// 点击查询
const checkList = () => {
  data.page.pageIndex = 1;
  getList(params.value);
};
// 表请求条数改变
const handlerPageSize = (pageSize) => {
  data.page.pageSize = pageSize;
  data.page.pageIndex = 1;
  getList(params.value);
};
// 表格页数改变
const handlerPageIndex = (pageIndex) => {
  data.page.pageIndex = pageIndex;
  getList(params.value);
};
// 改变可用状态
const changeEnable = (row) => {
  editStateFun({ id: row.id, state: row.state });
};
// 新增
const handlerAdd = () => {
  data.options = {
    show: true,
    type: "add", // 用于判断是编辑还是删除 add edit
    curRole: null,
  };
};
// 编辑
const handlerEdit = async (item) => {
  let res = await getRoleMenuApi(item.id);
  data.curRoleMenu = res;
  data.options = {
    show: true,
    type: "edit", // 用于判断是编辑还是删除 add edit
    curRole: item,
  };
};
// 删除
const handlerDel = async (item) => {
  deleteFun([item]);
};
// 保存弹框
const onSure = (options) => {
  if (options.type === "add") {
    // 新增角色
    addFun(options.form);
  } else {
    updateFun(options.id, options.form);
  }
  closeDialog();
};
// 关闭弹框
const closeDialog = () => {
  data.options = {
    show: false,
    type: "", // 用于判断是编辑还是删除 add edit
    curRole: null,
  };
  data.curRoleMenu = [];
};

const { form, options, curRoleMenu } = toRefs(data);
</script>
<style lang="scss" scoped></style>
